<template>
	<view style="width: 100%; height: 100%; display: flex; flex-direction: column;" class="boss-i">
		<view style="height: 10px;"></view>
		<view class="boss-item" :class="{'boss-item-s': selected}">
			<view class="nin"></view>
			<!-- <image src="../../static/pt.jpg" mode="" class="bg"></image> -->
			<image :src="bossIcon" mode="aspectFit" class="boss-icon" :class="{'boss-icon-selected': selected}"></image>
			<image v-if="selected && showGo" src="../../static/selcted_icon.png" mode="" class="selected-icon"></image>
		</view>
		<view  class="title" :class="{'t-selected': selected}">
			<view class="n-title">
				{{name}}
			</view>
			<block v-if="killing">
				<view class="t-killing">
					(击杀中)
				</view>
			</block>
		</view>
		<image v-if="killed" class="killed-mark" src="../../static/kill-mark.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		name:"boss-item",
		props: {
			selected: {
				type: Boolean,
				default: true
			},
			name: {
				type: String,
				default: 'boss'
			},
			bossIcon: {
				type: String,
				default: ''
			},
			showGo: {
				type: Boolean,
				default: true
			},
			killing: {
				type: Boolean,
				default: false
			},
			killed: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
	
	.boss-item {
		width: 100%;
		height: 1px;
		flex: 1;
		background-color: rgba(71, 71, 71, 1.0);
		border: 2px rgba(113, 113, 113, 1.0) solid;
		/* box-shadow: inset 0 0 30px #ffbc00; */
		position: relative;
		border-radius: 5px;
		opacity: 0.3;
		box-sizing: border-box;
	}
	
	.boss-item-s {
		opacity: 1;
	}
	
	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		opacity: 0.9;
	}
	
	.boss-icon {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 110%;
		z-index: 2;
	}
	
	.boss-icon-selected {
		height: 130%;
	}
	
	.selected-icon {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 5px;
		bottom: 5px;
	}
	
	
	.title {
		width: 100%;
		display: flex;
		justify-content: center;
		text-align: center;
		color: #9e9e9e;
		font-size: 14px;
		font-weight: bold;
		margin-top: 10px;
		
white-space: nowrap;          /* 防止文字换行 */
		  overflow: hidden;             /* 隐藏超出部分 */
		  text-overflow: ellipsis;      /* 显示省略号 */
	}
	
	
	.nin {
		width: 100%;
		height: 100%;
		/* background-color: red; */
		border: 3px rgba(53, 53, 53, 1.0) solid;
		box-sizing: border-box;
		border-radius: 3px;
	}
	
	.boss-i:hover {
		cursor: pointer;
	}
	
	.boss-i:hover .nin {
		background-color: rgba(0, 0, 0, 0.1);
	}
	
	.t-selected {
		color: #f7b10a;
	}
	
	.t-killing {
		color: #ff0000;
		text-shadow: 0 0 1px #000000;
		width: 60px;
	}
	
	.n-title {
		width: 1;
		flex: 1;
		
		white-space: nowrap;          /* 防止文字换行 */
		  overflow: hidden;             /* 隐藏超出部分 */
		  text-overflow: ellipsis;      /* 显示省略号 */
	}
	
	.boss-i {
		position: relative;
	}
	
	.killed-mark {
		width: 42px;
		height: 42px;
		position: absolute;
		z-index: 10;
		left: 30%;
		top: 10%;
		/* left: 6%;
		top: ; */
	}

</style>